<!--  D:/project/app/ydz-app-uniapp/static/images/knowledge/clinicaldetail -->
<template>
	<view class="pagebody">
		<view class="bgfff">
			<view class="topbox">
				<NavHeader></NavHeader>
			</view>
		</view>
<!-- 		<view class="topcontent  bgfff color303b39 ">
			<view class="justify-start flex-row mb16">
				<view class="left_icon"></view>
				<view class="lineclamp2" style="margin-left: 8rpx;">{{disease.name}}</view>
				
			</view>
			<view class="greenbox br16">
				<view class=" color303b39" style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 32rpx;line-height: 64rpx;" v-html="disease.content">
				</view>
				<view class="justify-center mt10 mb10">
					<image src="../../static/images/knowledge/clinicaldetail/downjt.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
				</view>
				<AdvCom :type='3'></AdvCom>
			</view>
		</view> -->
		<view class="formboxtitle">
			<span></span>
			{{userDocument.diseaseName}}指南
		</view>
		<view class="newsbox">
			<view class="listbox" v-for="(item,index) in newsList" :key="index" >
				<view class="newscard">
					<view class="title lineclamp2" @click="toNews(item.id)">
						{{item.name}}
					</view>
					<view class="content lineclamp2" >
						{{item.nostyletext?item.nostyletext.slice(0,40)+"...":''}} <span @click="toNews(item.id)" style="font-weight:400;font-size:32rpx;color:#00977C;line-height:14px;">[详情]</span>
					</view>
					<view class="flex-row justify-between align-center " style="margin-top: 32rpx;">
						<view class="" style="color: #7E8987; font-size: 24rpx;">
							推荐指数：{{item.hits}}
						</view>
						<view class="" style="color: #7E8987; font-size: 24rpx;">
							{{item.createTime}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <NewslistCom :head="1" :newsList="newsList" style="border-radius: 32rpx 32rpx 0 0;"></NewslistCom> -->
		<!-- <uni-pagination title="这是title" show-icon="true" :pageSize="pageSize" :total="total" :current="page" @change="changepage"></uni-pagination> -->
		<view class="pagebox">
			<!-- 统一分页器 -->
			<view class="thepager justify-between align-center">
				<view @click="tonewpage(1)" class="pagebtn" :class="page!=1?'havepage':''">
					上一页
				</view>
				<view class="pageNm">
					<span class="nowpage">{{page}}</span> <span style="margin: 0 8rpx;">/</span>{{pages}}
				</view>
				<view @click="tonewpage(2)" class="pagebtn" :class="page<pages?'havepage':''">
					下一页
				</view>
			</view>
		</view>
		<consulting></consulting>
		<AboutDrug :drugList="drugList"></AboutDrug>
		<community></community>
		<typenews :type="1" :disid="userDocument.diseaseId"  :list="zsNewsList">
		</typenews>
		<AdvCom :type='2'></AdvCom>
		<AboutClinical :clinicalList="clinicalList"></AboutClinical>
		<HotnewsCom></HotnewsCom>
		<FixedFoot :typeid="2"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import TopSearch from '../../layouts/topsearch.vue';
	import NavHeader from '../../layouts/navheader.vue';
	import NewslistCom from '../../components/generalcom/newslistcom.vue';
	import AdvCom from '../../layouts/advcome.vue';
	import AboutClinical from '../../components/generalcom/aboutclinical.vue';
	import AboutDrug from '../../components/generalcom/aboutdrug.vue';
	import consulting from '../../components/generalcom/consulting.vue'
	import community from '../../components/generalcom/community.vue'
	import typenews from '../../components/generalcom/typenews.vue';
	import HotnewsCom from '../../components/generalcom/hotnewcom.vue';
	import {
			getDiseaseById,getDrugList,getClinicalList,getNewsList,getotherlist
		} from '@/api/api.js'
		import {
			getInfo
		} from '@/api/login'
	export default {
		components: {
			FixedFoot,
			TopSearch,
			NewslistCom,
			AdvCom,
			AboutClinical,
			AboutDrug,
			consulting,
			community,
			typenews,
			HotnewsCom,
			NavHeader
		},
		data() {
			return {
				page:1,
				pageSize:6,
				total:0,
				pages:0,
				disease:{},
				typeContent:'',
				title:'',
				newsList:[],
				clinicalList:[],
				drugList:[],
				diseaseList:[],
				zsNewsList: [],
				userDocument:{},
			}
		},
		onLoad(option) {
			this.getuser()
			this.getDiseaseById(option.id)
		},
		methods: {
			// 统一分页器事件
			tonewpage(num) {
				if (num == 1) {
					if (this.page != 1) {
						this.page--
						this.getNewsList();
						this.topPage();
					} else {
						return
					}
				} else {
					if (this.page < this.pages) {
						this.page++
						this.getNewsList();
						this.topPage();
					} else {
						return
					}
				}
			},
			getuser() {
				getInfo().then(res => {
					this.user = res.user
					this.userDocument = res.userDocument
					this.getNewsList();
					this.znSelectNewsList()
				})
			},
			toNews(id){
				uni.navigateTo({
					url: '/pages/knowledge/znnewsdetail?id=' + id
				});
			},
			changepage(e) {
				this.page = e.current
				this.getNewsList();
				this.topPage();
			},
			topPage(){
			 	uni.pageScrollTo({
				scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
				duration:30  // 滚动动画的时长
				})
			},
			getDiseaseById(id){
				getDiseaseById(id).then(res => {
					if(200 == res.code){
						this.disease = res.data
						let dis = {
							"diseaseId":this.disease.id
						}
						this.diseaseList.push(dis);
						
						this.getDrugList();
						this.getClinicalList();
					}
				})
			},
			//疾病知识文章
			znSelectNewsList() {
				let params = {
					"pageNum": 1,
					"pageSize": 5,
					"type":"01",
					"state":"1",
					"orderByColumn" : "create_time",
					"isAsc":"desc",
					"diseaseId":this.userDocument.diseaseId
				}
				getotherlist(params).then(res => {
					this.zsNewsList = res.rows
				})
			},
		
			getNewsList() {
			   let param = {
					"pageNum": this.page,
					"pageSize": this.pageSize,
					"type":"02",
					"state":"1",
					"orderByColumn" : "create_time",
					"isAsc":"desc",
					"diseaseId":this.userDocument.diseaseId
			    }
				//相关文章
				getotherlist(param).then(response => {
					this.newsList = response.rows
					this.total = response.total
					this.pages = Math.ceil(this.total / this.pageSize)
					this.newsList.forEach(item=>{
						let str = item.content
						if (str) {
						  let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
						  str = words.replace(/\s/g, "")
						  item.nostyletext = str
						}
					})
					
				})
			},
			
			// 药品列表
			getDrugList(){
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"state":"1",
					"orderByColumn" : "create_time",
					"isAsc":"desc",
					"drugDiseaseList":this.diseaseList.length>0 ? this.diseaseList:null
				}
				console.log("param",param)
				getDrugList(param).then(res => {
					if(res.code == 200){
						this.drugList = res.rows
						console.log("this.drugList",this.drugList)
					}
				})
			},
			// 临床招募列表
			getClinicalList(){
				let param = {
					"pageNum": 1,
					"pageSize": 6,
					"state":"1",
					"orderByColumn" : "create_time",
					"isAsc":"desc",
					"clinicalDiseaseList":this.diseaseList.length>0 ? this.diseaseList:null
				}
				getClinicalList(param).then(res => {
					if(res.code == 200){
						this.clinicalList = res.rows
						console.log("this.clinicalList",this.clinicalList)
					}
				})
			},
			changepage(currentPage, type) { // 当前页改变
				this.page = currentPage;
				this.getNewsList();
				this.topPage();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pagebody {
		padding-bottom: 136rpx;
		background: #F0F6F5;

		.topbox {
			padding: 20rpx 24rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.25) 0%, #F0F6F5 100%);
		}
		.formboxtitle{
			margin-top: 32rpx;
			padding: 0 25rpx;
			margin-bottom: 34rpx;
			display: flex;
			justify-content: start;
			align-items: center;
			color: #303B39;
			font-size: 36rpx;
			font-weight: bold;
			span{
				width: 8rpx;
				height: 40rpx;
				background: #00D9B2;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}
		}
		.newsbox{
			background: #F0F6F5;
			.listbox {
				padding: 24rpx 24rpx;
				margin-bottom: 16rpx;
				background: #fff;
				border-radius: 32rpx;
			
				.newscard:nth-last-child(1) {
					border-bottom: none;
				}
			
				.newscard {
					border-bottom: 1rpx dashed #D7DDDC;
					// margin-top: 24rpx;
			
					.title {
						font-size: 38rpx;
						font-weight: bold;
						color: #303B39;
						line-height: 72rpx;
						text-align: left;
					}
			
					.content {
						font-weight: 500;
						font-size: 32rpx;
						color: #576260;
						line-height: 56rpx;
					}
				}
			
			}
		}
		
		
		.topcontent{
			padding: 42rpx 24rpx 24rpx;
			border-radius: 0 0 24rpx 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 36rpx;
			line-height: 38rpx;
			.left_icon{
				width: 8rpx;
				height: 40rpx;
				background: #00D9B2;
				border-radius: 50px 50px 50px 50px;
				line-height:  40rpx;
			}
			.greenbox{
				background: #EDFCF9;
				padding: 16rpx;
				.drugcard{
					margin-top: 16rpx;
					padding: 24rpx;
					background: #fff;
					border-radius: 32rpx;
				}
			}
		}
		.pagebox {
			// background: #fff;
			padding: 32rpx 24rpx;
			border-radius: 0 0 32rpx 32rpx;
		
			// 统一分页器样式
			.thepager {
				.pagebtn {
					width: 178rpx;
					height: 76rpx;
					border: 1px solid #B8C3C1;
					text-align: center;
					line-height: 76rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #303B39;
					background: #fff;
					border-radius: 24rpx;
				}
		
				.havepage {
					color: #00D9B2 !important;
					border-color: #00D9B2 !important;
				}
		
				.pageNm {
					font-weight: 400;
					font-size: 32rpx;
					color: #7E8987;
		
					.nowpage {
						color: #303B39;
		
					}
				}
		
			}
		}
	}
</style>